import TutorialData from '../types/Tutorial';
import TutorialService from '../services/TutorialService';
import {useState, useEffect, ChangeEvent} from 'react';
import { Link } from 'react-router-dom';

const TutorialList = ()=>{
    const [tutorials, setTutorials] = useState<Array<TutorialData>>([]);
    const [currentTutorial, setCurrentTutorial] = useState<TutorialData | null>(null);
    const [currentIndex, setCurrentIndex] = useState<number>(-1);
    const [searchTitle, setSearchTitle] = useState<string>("");

    useEffect(()=> {
        getTutorials();
    },[])

    const getTutorials = async ()=>{
        const response = await TutorialService.getTutorials();
        setTutorials(response.data);
        console.log(response.data);
    }

    const findByTitle = async ()=>{
        const response = await TutorialService.findByTitle(searchTitle);
        setTutorials(response.data);
        setCurrentIndex(-1);
        setCurrentTutorial(null);
        console.log(response.data);    
    }

    const onChangeValue = (e: ChangeEvent<HTMLInputElement>) =>{
        const searchTitle = e.target.value;
        setSearchTitle(searchTitle);
    }

    const setActiveTutorial = (tutorial: TutorialData, index:number) =>{
        setCurrentTutorial(tutorial);
        setCurrentIndex(index);
    }

    return (
        <div className="list row">
            <div className="col-md-8">
                <div className="input-group mb-3">
                    <input 
                        type="text" 
                        className="form-control" 
                        placeholder="Search by title"
                        value={searchTitle}
                        onChange={onChangeValue}
                        />
                    <div className="input-group-append">
                        <button className="btn btn-outline-secondary"
                            type="button"
                            onClick={findByTitle}
                        >
                           Search
                        </button>
                    </div>
                </div>
            </div>
            <div className="col-md-6">
                <h4>Tutorial List</h4>
                <ul className="list-group">
                    {tutorials && tutorials.map((tutorial, index)=>(
                        <li className={"list-group-item "+(index === currentIndex? "active":"")}
                            key={index}
                            onClick={()=> setActiveTutorial(tutorial, index)}
                        >
                            {tutorial.title}
                        </li>
                    ))}
                </ul>
            </div>
            <div className="col-md-6">
                {currentTutorial ? (
                    <div>
                        <h4>Tutorial</h4>
                        <div>
                            <label>
                                <strong>Title:</strong>
                            </label>{""}
                            {currentTutorial.title}
                        </div>
                        <div>
                            <label>
                                <strong>Description:</strong>
                            </label>{""}
                            {currentTutorial.description}
                        </div>
                        <Link to={"/tutorials/"+currentTutorial.id}
                              className="badge badge-warning">
                            Edit
                        </Link>
                    </div>
                ):(<div>
                    <br/>
                    <p>Please select a tutorial</p>
                </div>)}
            </div>
        </div>
    )
}

export default TutorialList;